<template>
	<view class="page">
		<view class='feedback-title'>
			<text>问题和意见</text>
		</view>
		<view class="feedback-body">
			<textarea placeholder="请详细描述你的问题和意见..." v-model="sendDate.content" class="feedback-textare" />
			</view>
        <view class='feedback-title'>
            <text>图片(选填,提供问题截图,总大小10M以下)</text>
        </view>
        <view class="feedback-body feedback-uploader">
            <view class="uni-uploader">
                <view class="uni-uploader-body">
                    <view class="uni-uploader__files">
                        <block v-for="(image,index) in imageList" :key="index">
                            <view class="uni-uploader__file" style="position: relative;">
                                <image class="uni-uploader__img" :src="image" :data-src="image" @tap="previewImage"></image>
                                <view class="close-view" :data-index="index" @click="close">x</view>
                            </view>
                        </block>
                        <view class="uni-uploader__input-box" v-show="imageList.length < imageLength">
                        	<view class="uni-uploader__input" @tap="chooseImg"></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view class='feedback-title'>
            <text>QQ/邮箱</text>
        </view>
        <view class="feedback-body">
            <input class="feedback-input" v-model="sendDate.contact" placeholder="(选填,方便我们联系你 )" />
        </view>
        <view class='feedback-title feedback-star-view'>
            <text>应用评分</text>
            <view class="feedback-star-view">
                <text class="feedback-star" v-for="(value,key) in stars" :key="key" :class="key < sendDate.score ? 'active' : ''" @tap="chooseStar(value)"></text>
            </view>
        </view>
		
        <button type="primary" class="feedback-submit" @tap="send">提交</button>
        
    </view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';		
    export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},			
        data() {
            return {
                msgContents: ["界面显示错乱", "启动缓慢，卡出翔了", "UI无法直视，丑哭了", "偶发性崩溃"],
                stars: [1, 2, 3, 4, 5],
                imageList: [],
				imageLength: 3,
                sendDate: {
                    score: 0,
                    content: "",
                    contact: "",
					uploadFilePath: "",
                },
				sysInfo:{},
            }
        },
        onLoad() {
            //获取设备信息，接口需要获取
			this.getSysInfo();
        },
        methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),	
			getSysInfo(){
				var that = this;
				uni.getSystemInfo({
					success: function (res) {
						//console.log(res);
						that.sysInfo = {
							brand: res.brand,//手机品牌
							model: res.model,//手机型号
							pixelRatio: res.pixelRatio,//设备像素比
							screenWidth: res.screenWidth,//屏幕宽度
							screenHeight: res.screenHeight,//屏幕高度
							windowWidth: res.windowWidth,//可使用窗口宽度
							windowHeight: res.windowHeight,//可使用窗口高度
							statusBarHeight: res.statusBarHeight,//状态栏的高度
							language: res.language,//应用设置的语言
							system: res.system,//操作系统版本
							platform: res.platform,//客户端平台
						};
					}
				});
			},
			send(){
				if (this.sendDate.content.length < 1) {
					uni.showToast({
						title: "请输入内容",
						icon: "none",
					});
				} else {
					 uni.showLoading({});
					if (this.imageList.length > 0) {
						this.uploadFiles();
					} else{
						this.saveFeedback();
					}
				}
			},
            chooseStar(e){
				this.sendDate.score = e;
			},
			saveFeedback() {
				var data = {
					username: this.hasLogin==true?this.userInfo.username:"",
					cover: this.sendDate.uploadFilePath,
					content: this.sendDate.content,
					contact: this.sendDate.contact,
					score: this.sendDate.score,
					brand: this.sysInfo.brand,
					model: this.sysInfo.model,
					system: this.sysInfo.system,
					platform: this.sysInfo.platform,
					pixelRatio: this.sysInfo.pixelRatio,
					screenWidth: this.sysInfo.screenWidth,
					screenHeight: this.sysInfo.screenHeight,
				};
				uni.request({
					url: this.serverUrl + 'user-api/saveMyFeedback',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					data: data,
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							uni.showToast({
								title:"感谢您的反馈"
							})
							setTimeout(function(){
								uni.switchTab({
									url: "/pages/tab-bar/my/my",
								})
							},1000)
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					fail: (data, code) => {
						console.log('fail' + JSON.stringify(data));
					},
					complete: (r) => {
						uni.hideLoading();
					}
				})
			},			
			uploadFiles(f) {
				var i=f?f:0;
				uni.uploadFile({
					url: this.serverUrl + 'user-api/uploadFile',
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					filePath: this.imageList[i],
					name: 'file',
					method: "POST",
					formData: {
						username: "",
					},
					success: (r) => {
						var rdata = JSON.parse(r.data);
						this.sendDate.uploadFilePath += rdata.data.result +";";
					},
					fail: (r) => {
						uni.showToast({
							title:"上传失败",
						})
					},
					complete: (r) => {
						i++;
						if(i==this.imageList.length){ 
							this.sendDate.uploadFilePath = this.sendDate.uploadFilePath.substring(0,this.sendDate.uploadFilePath.length-1);
							this.saveFeedback();
						}else{
							f=i;
							this.uploadFiles(f);
						}									
					}
				});			
			},			
			//选择图片
			chooseImg: async function() {
				uni.chooseImage({
					sourceType: ['camera', 'album'],
					// #ifdef MP-WEIXIN
					sizeType: ['compressed', 'original'],
					// #endif
					count: this.imageLength - this.imageList.length,
					success: (res) => {
						this.imageList = this.imageList.concat(res.tempFilePaths);
					}
				})
			},
			//预览图片#
			previewImage: function(e) {
				var current = e.target.dataset.src;
				uni.previewImage({
					current: current,
					urls: this.imageList
				})
			},
			//删除图片
			close: function(e) {
				var index = e.target.dataset.index;
				var that = this;
				var images = that.imageList;
				images.splice(index, 1);
				that.imageList = images;
			}			
        }
    }
</script>

<style>
    page {
        background-color: #EFEFF4;
    }

    .input-view {
        font-size: 28upx;
    }
    .close-view{
        text-align: center;
		line-height:14px;
		height: 16px;
		width: 16px;
		border-radius: 50%;
		background: #FF5053;
		color: #FFFFFF;
		position: absolute;
		top: -6px;
		right: -4px;
		font-size: 12px;
    }
	textarea,input {
		font-size: 32upx;
	}
</style>
